import 'package:flutter/material.dart';
import 'package:t3_data_service/biz_data_source/map/address/poi_search/model/airport_item.dart';
import 'package:t3_foundation/t3_foundation.dart';
import 'package:uikit/uikit.dart';

class AirportPickerPopViewModel extends ViewModel {
  var city = ''.obs;
  var airportItems = <AirportItem>[].obs;

  updateAirport(String cityName, List<AirportItem>? items) {
    city.value = cityName;
    airportItems.value = items ?? [];
  }
}

class AirportPickerPopWidget extends StatelessWidget {
  final AirportPickerPopViewModel viewModel;

  final VoidCallback clickChangeCity;
  final ValueChanged<AirportItem> clickCallback;

  const AirportPickerPopWidget({
    Key? key,
    required this.viewModel,
    required this.clickCallback,
    required this.clickChangeCity
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var rate = MediaQuery.of(context).size.width / 375.0;
    return Obx(() {
      var contentHeight = 191.0;
      if (viewModel.airportItems.value.isNotEmpty) {
        contentHeight = viewModel.airportItems.value.length * 56.0;
      }
      var paddingBottom = MediaQuery.of(context).padding.bottom;
      var bgHeight = (rate * 96.0);
      contentHeight += paddingBottom;
      contentHeight += bgHeight;
      return Container(
          decoration: const BoxDecoration(
            borderRadius:  BorderRadius.only(
              topLeft: Radius.circular(24),
              topRight: Radius.circular(24),
            ),
          ),
          width: MediaQuery.of(context).size.width,
          height: contentHeight,
          child: Column(
            children: [
              Stack(
                children: [
                  SizedBox(
                    width: MediaQuery.of(context).size.width,
                    height: bgHeight,
                    child: T3Image.t3assets(T3AssetsName.flight_transfer_bg, fit: BoxFit.cover),
                  ),
                  Positioned(
                    right: 16,
                    top: 16,
                    child: GestureDetector(
                      onTap: () {
                        Navigator.of(context).pop();
                      },
                      child: SizedBox(
                          width: 24,
                          height: 24,
                          child: T3Image.t3assets(T3AssetsName.icon_close)
                      ),
                    ),
                  ),
                  Positioned(
                    left: 20,
                    top: 24,
                    child: GestureDetector(
                      onTap: clickChangeCity,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(
                            viewModel.city.value,
                            style: const TextStyle(
                              color: LucyColors.lucy_02102A,
                              fontSize: 20,
                              fontWeight: LucyFonts.semi_bold,
                            ),
                          ),
                          const SizedBox(width: 2,),
                          T3Image.t3assets(T3AssetsName.icon_selectcity_down),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
              if (viewModel.airportItems.value.isEmpty)
                Container(
                  color: Colors.white,
                  width: MediaQuery.of(context).size.width,
                  height: 191,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      const SizedBox(height: 28,),
                      T3Image.t3assets(T3AssetsName.flight_empty_bg),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          const Text(
                            "当前城市无机场信息，请",
                            style: TextStyle(
                                color: Color(0xffa5a7ad),
                                fontSize: 14,
                                fontWeight: LucyFonts.regular
                            ),
                          ),
                          GestureDetector(
                            onTap: clickChangeCity,
                            child: const Text(
                              "切换城市",
                              style: TextStyle(
                                  color: Color(0xffff8533),
                                  fontSize: 14,
                                  fontWeight: LucyFonts.regular
                              ),
                            ),
                          )
                        ],
                      )
                    ],
                  ),
                ),
              if (viewModel.airportItems.value.isNotEmpty)
                Container(
                  color: Colors.white,
                  width: MediaQuery.of(context).size.width,
                  height: viewModel.airportItems.value.length * 56,
                  child: ListView.separated(
                      itemBuilder: (BuildContext context, int index) {
                        return GestureDetector(
                          onTap: () {
                            var item = viewModel.airportItems.value.safeAccess(index);
                            if (item != null) {
                              Navigator.of(context).pop();
                              clickCallback(item);
                            }
                          },
                          child: SizedBox(
                            height: 56,
                            width: MediaQuery.of(context).size.width,
                            child: Center(
                              child: Text(
                                viewModel.airportItems.value.safeAccess(index)?.airportName ?? '',
                                style: const TextStyle(
                                    color: Colors.black,
                                    fontSize: 18,
                                    fontWeight: LucyFonts.regular
                                ),
                              ),
                            ),
                          ),
                        );
                      }, separatorBuilder: (BuildContext context, int index) {
                    return Container(
                      height: 0.5,
                      width: MediaQuery.of(context).size.width,
                      color: LucyColors.lucy_E9EBF0,
                    );
                  }, itemCount: viewModel.airportItems.value.length
                  ),
                ),
              Container(
                height: paddingBottom,
                width: MediaQuery.of(context).size.width,
                color: Colors.white,
              ),
            ],
          )
      );
    });
  }
}
